<template>
  <div class="wrapper">
	<swiper :options="swiperOption">
	    <!-- slides -->
	    <swiper-slide v-for="item of swiperList" :key="item.id">
	    	<img class="swiper-img" width="100%" :src="item.imgUrl">
	    </swiper-slide>
	    <!-- Optional controls -->
	    <div class="swiper-pagination"  slot="pagination"></div>
  	</swiper>
  </div>
</template>

<script>
export default{
	name: 'HomeSwiper',
	data () {
		return {
			swiperOption: {
				pagination: '.swiper-pagination',
				loop: true
			},
			swiperList: [{
				id: '001',
				imgUrl: 'static/images/01.webp'
			},{
				id: '002',
				imgUrl: 'static/images/02.webp'
			},{
				id: '003',
				imgUrl: 'static/images/03.webp'
			},{
				id: '004',
				imgUrl: 'static/images/04.webp'
			},{
				id: '005',
				imgUrl: 'static/images/05.webp'
			},{
				id: '006',
				imgUrl: 'static/images/06.webp'
			},{
				id: '007',
				imgUrl: 'static/images/07.webp'
			},{
				id: '008',
				imgUrl: 'static/images/08.webp'
			},{
				id: '009',
				imgUrl: 'static/images/09.webp'
			},{
				id: '010',
				imgUrl: 'static/images/10.webp'
			}
			]
		}
	}
}
</script>

<style lang="stylus" scoped>
  /* chuan tou yang shi ying yong */
  /* !important Frist in the weight */
  .wrapper >>> .swiper-pagination-bullet
    background: #fff !important
  .wrapper >>> .swiper-pagination-bullet-active
    background: red !important
  .wrapper
  	overflow: hidden
  	width: 100%
  	height 0
  	padding-bottom: 179%
</style>